<script setup>
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div style="display: flex; align-items: center">
          <div class="avatar-logo">
            <img
              :src="'https://ts1.cn.mm.bing.net/th/id/R-C.1f2e8a17ac6d0907c5e4903549bc7cb2?rik=5Y3%2b4GlmTyE%2f0Q&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2019%2f08-26%2f69358%2fwater_69358_698_698_.png&ehk=81%2fEbgOs09pkm1l2ReKVA84PZJMmLgbTVCJDJWsHYJE%3d&risl=&pid=ImgRaw&r=0'"
              alt=""
            />
          </div>
          <div style="margin-left: 20px">
            <!-- <el-button type="" v-if="!isFrontHome" @click="comeBackCompany()">返回</el-button> -->
            张汝汝汝
          </div>
        </div>

        <div style="display: flex; align-items: center">
          <div class="setUp"  @click="goSetUp()">
            <div><img src="@\assets\imgs\205设置.png" alt="" style="width:25px" /></div>
            <div>设置</div>
          </div>

          <div class="exit"  @click="openDialog()">
            <div style="">
              <img src="@\assets\imgs\退出.png" style="width:25px" alt="" />
            </div>
            <div>退出登录</div>
          </div>
        </div>
      </el-header>
      <el-main class="main"><RouterView /></el-main>
    </el-container>
    <div>
      <el-dialog
        v-model="dialogVisible"
       
        width="500"
        :before-close="handleClose"
      >
        <div
          style="display: flex; align-items: center; justify-content: center; height:200px"
        >
          是否确定退出?
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">继续使用</el-button>
            <el-button type="primary" @click="goLogin()">
              退出登录
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, toRaw } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dialogVisible = ref(false);
const isFrontHome = computed(() => {
  console.log("当前路由:" + toRaw(router).currentRoute.value.fullPath);
  return toRaw(router).currentRoute.value.fullPath === "/frontHome"; // 假设路由名称为 'FrontHome'
});

const comeBackCompany = () => {
  router.back();
};
const openDialog = () => {
  dialogVisible.value = true;
};

const goSetUp = () =>{
  router.push('/systemSetting')
}

const goLogin = () =>{
  dialogVisible.value = false;
  router.push('/login')
}
</script>

<style scoped>
@import "@/assets/css/manager.css";
.common-layout{
  min-width: 100vw;
  min-height: 100vh;
}
.el-header {
  position: fixed; /* 固定位置 */
  top: 0px; /* 距离顶部 10px */
  left: 50%; /* 居中 */
  transform: translateX(-50%); /* 垂直居中调整 */
  z-index: 1000;
  width: 100%;
  height: 60px;

  background-color:  rgb(221, 87, 46);
  color: #f8f8ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar-logo {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
}
.avatar-logo img {
  width: 100%; /* 使图片宽度适应 div */
  height: 100%; /* 使图片高度适应 div */
  object-fit: cover; /* 保持纵横比并裁剪 */
  border-radius: 50%;
}
.setUp {
  margin-right: 30px;
  width: 70px;
  text-align: center;
}
.exit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 70px;
  text-align: center;
}
.main {
  margin: 0;
  margin-top: 60px;
  padding: 0;
  /* height: calc(100vh - 60px);
   overflow: auto; */
}
.dialog-footer{
  margin: 0 70px;
  display: flex;
  justify-content: space-between;
  border-radius: 30px;
}
</style>